04. Axes and Direction in Action

Axes and Direction with Flexbox Example Prep

Axes and Direction in Action

After setting an element's display to flex, the next thing you will usually want to state is whether the elements inside the container should be laid out in rows or columns. You can do this using the flex-direction property, and setting its value to either column or row.

ND001 C01 L03 04 Axes And Direction With Flexbox Example

Axes and Direction with Flexbox Example Summary

To set the layout of the items in a flex container to either a row or column use the flex-direction property like this:

.container{
  display:flex;
  flex-direction: row
}

Axes and Direction with Flexbox Problem Set

Which of the following are true?
SOLUTION:
  • If the `flex-direction` is set to `row` or `row-reverse` the main axis is horizontal.
  • If the `flex-direction` is set to `column` or `column-reverse` the main axis is vertical.
  • If the main axis is horizontal the cross axis is vertical.
  • The two axis control the flow of space in flexbox and correspond to the `align-items` and `justify-content` properties.

Workspace

This section contains either a workspace (it can be a Jupyter Notebook workspace or an online code editor work space, etc.) and it cannot be automatically downloaded to be generated here. Please access the classroom with your account and manually download the workspace to your local machine. Note that for some courses, Udacity upload the workspace files onto https://github.com/udacity, so you may be able to download them there.

Workspace Information:

  • Default file path:
  • Workspace type: html-live
  • Opened files (when workspace is loaded): n/a

Axes and Direction with Flexbox Summary

Axes and direction are important concepts for understanding flexbox. They are both conceptual and technical which can be tricky. One suggestion is to try and draw your flex containers out first in a notebook. This can be helpful for mapping out axes and direction.

Axes and Direction with Flexbox Further Research

Further Research

For more on axis and direction with flexbox see the documentation here.

Next Concept